<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JQuery实现表单验证</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
    body{
        background-image: url("img/gf.jpg");
    }
    .rg_layout{
        width: 900px;
        height: 500px;
        border: 1px solid #EEEEEE;
        /*让div水平居中*/
        margin: auto;
        background-image: url("img/xuej.jpg");

    }
    .rg_left{
        float: left;
        margin: 15px;
        width: 20%;
    }
    .rg_left > p:first-child{
        color: #FFD026;
        font-size: 20px;
    }
    .rg_left > p:last-child{
        color: #A6A6A6;
    }
    .rg_center{
        float: left;
        width: 450px;
        margin-top: 15px;
    }
    .rg_right{
        float: right;
        margin: 15px;
    }
    .rg_right > p:first-child{
        font-size: 15px;
    }
    .rg_right p a {
        color: pink;
    }
    .td_left{
        width: 100px;
        text-align: right;
        height: 45px;
    }
    .td_right{
        padding-left: 10px;
    }
    #username,#password,#repassword,#email,#phone,#code,#birthday{
        width: 200px;
        height: 32px;
        border: 1px solid #A6A6A6;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px ;
    }
    #code{
        width: 110px;
    }
    #btn_sub{
        width: 150px;
        height: 40px;
        background-color: #FFD026;
        border: 1px solid #FFD026;
        cursor: pointer;
        margin-top: 15px;
    }
    span{
        color: red;
    }
</style>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <div class="rg_form" style="margin-top: 15px;">
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名:</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="用户名至少6位"><span id="username_msg"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码:</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="密码至少要6位"><span id="password_msg"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="repassword">确认密码:</label></td>
                        <td class="td_right"><input type="repassword" name="repassword" id="repassword" placeholder="两次密码要一致"><span id="repassword_msg"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">Email:</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="邮箱要按正确格式"><span id="email_msg"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="phone">手机号:</label></td>
                        <td class="td_right"><input type="text" name="phone" id="phone" placeholder="手机号要11位"><span id="phone_msg"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>性别:</label></td>
                        <td class="td_right"><input type="radio" name="gender" value="male">男
                            <input type="radio" name="gender" value="female">女</td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="birthday">出生日期:</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="code">验证码:</label></td>
                        <td class="td_right"><input type="text" name="code" id="code" placeholder="请输入验证码">
                            <input style="width: 35px;color: blue;cursor: pointer;" type="text" id="sccode" name="sccode"><span id="code_msg"></span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><button type="submit" id="btn_sub" >立即注册</button></td>
                    </tr>
                </table>


            </form>
        </div>
    </div>
    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>

</div>
</body>
<script type="text/javascript">
    //是否为空
    function ifnull(txt){
        if(txt.length==0){
            return true;
        }
        var $reg=/\s+/;
        return $reg.test(txt);
    }
    //在id为email的元素失去焦点时进行邮箱的验证
    $("#email").blur(function(){
        if(ifnull($(this).val())){
            $("#email_msg").html("邮箱不能为空");
        }else{
            var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
            if(!$reg.test($("#email").val())){
                $("#email_msg").html("邮箱格式错误！");
            }else{
                $("#email_msg").html("√").CSS("color","green");
            }
        }
    });
    //在id为username的元素失去焦点时进行用户名的验证
    $("#username").blur(function(){
        if(ifnull($(this).val())){
            $("#username_msg").html("用户名不能为空");
        }else{
            var $reg=/^\w{6,}$/;
            if(!$reg.test($("#username").val())){
                $("#username_msg").html("用户名至少要6位哦");
            }else{
                $("#username_msg").html("√");
            }
        }
    });
    //在id为password的元素失去焦点时进行密码的验证
    $("#password").blur(function(){
        if(ifnull($(this).val())){
            $("#password_msg").html("密码不能为空");
        }else{
            var $reg=/^\w{6,}$/;
            if(!$reg.test($("#password").val())){
                $("#password_msg").html("密码至少要6位哦");
            }else{
                $("#password_msg").html("√");
            }
        }
    });
    //在id为repassword的元素失去焦点时进行密码的验证
    $("#repassword").blur(function(){
        if(ifnull($(this).val())){
            $("#repassword_msg").html("请确认密码");
        }else{
            if($("#password").val()!=$("#repassword").val()){
                $("#repassword_msg").html("两次密码不一致");
            }else{
                $("#repassword_msg").html("√");
            }
        }
    });
    //在id为phone的元素失去焦点时进行手机号的验证
    $("#phone").blur(function(){
        if(ifnull($(this).val())){
            $("#phone_msg").html("手机号不能为空");
        }else{
            var $reg=/^1[3456789]\d{9}$/;
            if(!$reg.test($("#phone").val())){
                $("#phone_msg").html("手机号格式错误！");
            }else{
                $("#phone_msg").html("√").css("color","green");
            }
        }
    });
    function generateCode(){
        var sccode="";
        for(var i=0;i<4;i++){
            var randomNum=Math.floor(Math.random()*10);
            sccode+=randomNum;
        }
        return sccode;
    }

    $("#sccode").val(generateCode());
    $("#sccode").click(function(){
        $("#sccode").val(generateCode());
        $("#code_msg").html("");
    });
    $("#code").blur(function(){
        if(ifnull($(this).val())){
            $("#code_msg").html("验证码不能为空");
        }else{
            if($(this).val()!=$("#sccode").val()){
                $("#code_msg").html("验证码错误！");
                $("#sccode").val(generateCode());
            }else{
                $("#code_msg").html("√").css("color","green");
            }
        }
    });

    //验证表单
    function checkForm(){
        //验证邮箱
        if(ifnull($("#email").val())){
            $("#email_msg").html("邮箱不能为空！");
            return false;
        }else{
            var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
            if(!$reg.test($("#email").val())){
                $("#email_msg").html("邮箱格式错误！");
                return false;
            }
        }
        //验证用户名
        if(ifnull($("#username").val())){
            $("#username_msg").html("用户名不能为空！");
            return false;
        }else{
            var $reg=/^\w{6,}$/;
            if(!$reg.test($("#username").val())){
                $("#username_msg").html("用户名至少6位");
                return false;
            }
        }
        //验证密码
        if(ifnull($("#password").val())){
            $("#password_msg").html("密码不能为空");
            return false;
        }else{
            var $reg=/^\w{6,}$/;
            if(!$reg.test($("#password").val())){
                $("#password_msg").html("密码至少6位");
                return false;
            }
        }
        //确认密码是否为空
        if(ifnull($("#repassword").val())){
            $("#repassword_msg").html("请确认密码");
            return false;
        }
        //验证两次密码是否一致
        if($("#password").val()!=$("#repassword").val()){
            $("#repassword_msg").html("两次密码不一致");
            return false;
        }
        //验证手机号
        if(ifnull($("#phone").val())){
            $("#phone_msg").html("手机号不能为空！");
            return false;
        }else{
            var $reg=/^1[3456789]\d{9}$/;
            if(!$reg.test($("#phone").val())){
                $("#phone_msg").html("手机号格式错误！");
                return false;
            }
        }
        if(ifnull($("#code").val())){
            $("#code_msg").html("验证码不能为空");
        }else{
            if(sccode==code){
                $("#code_msg").html("√").CSS("color","green");
            }else{
                $("#code_msg").html("验证码错误！").CSS("color","red");
                $("#sccode").val(generateCode());//重新生成新的验证码
            }
        }
        return true;
    }
</script>
</html>